<template>
	<div class="wrap">
		<div class="answer-bot">
			<h3 style="color: #333; margin: 8px 0 16px">赞助商名称：{{ $route.query.name }}</h3>
			<p style="border-top: 1px solid #eee; padding: 15px 3px">已关联赛事列表</p>
			<el-table
				:data="tableData"
				stripe
				border
				size="small"
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
			>
				<el-table-column label="序号" width="60px" type="index" align="center" />
				<el-table-column
					label="赛事编号"
					prop="race_id"
					min-width="100px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赛事名称"
					prop="race_name"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="免费名额"
					prop="free_num"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="折扣名额"
					prop="discount_num"
					min-width="180px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="折扣金额"
					prop="discount_money"
					min-width="180px"
					show-overflow-tooltip
					align="center"
				/>

				<el-table-column label="操作" width="170" align="center">
					<template slot-scope="{ row }">
						<el-link type="primary" :underline="false" @click="$refs.give.initData(row)">
							增加名额
						</el-link>
						<el-button type="text" class="btn-blue" v-prevent-click @click="$refs.import.init(row)">
							导入名额
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="pageChange"
					/>
				</el-col>
			</el-row>
		</div>
		<el-row type="flex" justify="end" style="margin-top: 10px">
			<el-button size="small" @click="$router.back()" style="width: 100px">返回</el-button>
		</el-row>
		<GiveSeat ref="give" />
		<ImportData ref="import" />
	</div>
</template>

<script>
	import { getBindRace } from '@/api/user-manager.js'
	import Pagination from '@/components/Pagination'
	import GiveSeat from './components/giveSeat.vue'
	import ImportData from './components/ImportData.vue'
	export default {
		components: {
			Pagination,
			GiveSeat,
			ImportData
		},
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tableData: []
			}
		},
		created() {
			this.searchData()
		},
		methods: {
			// 搜索
			searchData() {
				this.pageNo = 1
				this.loadData()
			},
			// 分页
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			loadData() {
				const loading = this.$setLoading()
				this.tableData = []
				getBindRace({
					spon_id: this.$route.query.id,
					page_no: this.pageNo,
					page_size: this.pageSize
				}).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-link {
		margin-right: 12px;
	}
	.form {
		background: #ffffff;
		padding: 20px 10px 0;
		margin-bottom: 10px;
		border-radius: 2px;
		display: flex;
		flex-wrap: wrap;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	.answer-bot {
		padding: 16px;
		border-radius: 2px;
		background-color: #ffffff;
		.bot-title {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #000000;
		}
	}
</style>
